<template>
<div class="col-lg-12">
    <div class="ibox">
        <div class="ibox-content">
            <div id="reportrange" class="form-control">
                <div class="block">
                    <label class="mr-1"><input name="daily" type="checkbox" value="daily" v-model="selected"></label>
                    <label class="col-form-label mr-1">{{ '时间过滤:' }}</label>
                    <!-- <span class="demonstration">带快捷选项</span> -->
                    <el-date-picker
                        v-model="pick_value"
                        align="right"
                        size="small"
                        type="date"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                    <!-- <el-date-picker
                        v-model="pick_value"
                        type="daterange"
                        align="right"
                        size="small"
                        unlink-panels
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions">
                    </el-date-picker> -->
                    <label class="col-form-label mr-1 ml-4">{{ '事业部:' }}</label>
                    <el-select v-model="option_value" multiple placeholder="请选择" size="small" style="width:300px" class="mr-4">
                        <el-option label="所有" value="all"></el-option>
                        <el-option
                            v-for="item in selectedOptions"
                            :key="item.departmentid"
                            :label="item.fullname"
                            :value="item.departmentid">
                        </el-option>
                    </el-select>
                    <el-button type="primary" icon="el-icon-search" size="small" :loading="searching" @click="searching_button">搜索</el-button>
                </div>

                
            </div>
        </div>
    </div>
</div>  
</template>

<script>
export default {
    data() {
        return {
            user: JSON.parse(localStorage.getItem('user')),
            selected: false,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            pick_value: '',
            selectedOptions: [],
            option_value: ['all'],
            searching: false,
            pop_option_value: ''
        }
    },
    methods: {
        getDepartment: function(token, username) {
            this.$axios.get('/api/qa/getdepartment/?token='+token+'&username='+username)
                .then((response) => {
                    if (response.status == 200) {
                        this.selectedOptions = response.data.department;
                    }
                })
                .catch((err) => {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        searching_button: function() {
            this.$emit('departmentIds', this.pop_option_value)

        }
    },
    watch: {
        option_value: function() {
            var option_value = this.option_value;
            var username = this.user.data.username;
            var departmentId_list = [];
            for (const element of option_value) {
                if ('all' == element){
                    departmentId_list = ['all'];
                    break;
                } else if ("undefined" == typeof(element) || null == element) {
                    continue;
                } else if ("number" == typeof(element)) {
                    departmentId_list.push(element);
                }  else if ("string" == typeof(element) && element.indexOf(' ') >= 0) {
                    departmentId_list.push(element.split(' ')[1]);
                } else {
                    departmentId_list.push(element);
                }
            }
            var departmentIds = departmentId_list.join(',');
            this.pop_option_value = departmentIds;
        },
        pick_value: function() {
            if (this.selected) {
                if (this.pick_value == null) {
                    this.$emit('date', '');
                } else {
                    this.$emit('date', this.pick_value);
                }
            } 
        },
        selected: function() {
            if (this.selected) {
                this.$emit('date', this.pick_value);
            } else {
                this.$emit('date', '');  
            }
        }
    },
    mounted: function() {
        this.getDepartment(this.user.token, this.user.data.username);
    }
};
</script>

<style lang="scss" scoped>
    @import '../../assets/common/common.scss';
</style>